<template>
  <div class="index">
      <div class="index_top">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'index' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="index_middle">
          <h2>数据统计</h2>
          <ul>
              <li>当日数据：</li>
              <li><h3>{{one}}</h3> 新增用户</li>
              <li><h3>{{two}}</h3> 新增订单</li>
              <li><h3>{{three}}</h3> 新增管理员</li>
          </ul>
          <ul>
               <li class="ac">总数据：</li>
              <li><h3>{{four}}</h3> 注册用户</li>
              <li><h3>{{five}}</h3> 订单</li>
              <li><h3>{{six}}</h3> 管理员</li>
          </ul>
      </div>
      <!-- v-if="date.length>0" :date='date' -->
      <!-- <tu-biao></tu-biao> -->
      <tu-biao v-if="xX.length>0&&xD.length>0&&xG.length>0" :y='y' :xX="xX" :xD='xD' :xG="xG"></tu-biao>
  </div>
</template>

<script>
import tuBiao from './tubiao';
export default {
    components:{
        tuBiao
    },
    data(){
        return{
            one:'',
            two:'',
            three:'',
            four:'',
            five:'',
            six:'',
            time:'',
            date:[],
            y:[],
            xX:[],
            xD:[],
            xG:[],
            arr:['user','order','admin']
        }
    },
    created(){
            const dateList = [...Array(7).keys()].map(days => {
            let t = new Date(Date.now() - 86400000 * days);
            let m=t.getMonth() + 1;
            let a=m<10?'0'+m:m;
            let str = `${t.getFullYear()}-${a}-${t.getDate()}`;
            // console.log('aa', srt);
            return str;
        });
            console.log(dateList);
            this.y=dateList.reverse();
            // this.y=dateList;//七天时间的整个数组
            this.timer();
    },
    async mounted(){
        this.$axios.all([this.axOne(),this.axTwo(),this.axThree(),this.axFour(),this.axFive(),
        this.axSix()])
        .then(this.$axios.spread((res1, res2,res3,res4,res5,res6)=>{
            // console.log(res1.data.count);
            this.one=res1.data.count;
            this.two=res2.data.count;
            this.three=res3.data.count;
            this.four=res4.data.count;
            this.five=res5.data.count;
            this.six=res6.data.count;
            // console.log(res2);
            // console.log(res3);
        }));

        //
        var p=[];
        var p1=[];
        var p2=[];
        for(var i=0;i<this.y.length;i++){
            var a=this.qiX('user',this.y[i]);//user接口的 七天时间
            p.push(a);
            var b=this.qiX('order',this.y[i]);//user接口的 七天时间
            p1.push(b);
             var c=this.qiX('admin',this.y[i]);//user接口的 七天时间
            p2.push(c);
        }
        Promise.all(p).then(res=>{
            console.log(res);
            this.xX=res;
        });
        Promise.all(p1).then(res=>{
            console.log(res);
            this.xD=res;
        });
        Promise.all(p2).then(res=>{
            console.log(res);
            this.xG=res;
        })
    },
    methods:{
        timer(){//获取当天的时间格式
            let date=new Date();
            var y = date.getFullYear();  
            var m = date.getMonth() + 1;  
            m = m < 10 ? ('0' + m) : m;  
            var d = date.getDate();  
            d = d < 10 ? ('0' + d) : d;    
            this.time= y + '-' + m + '-' + d;  
            console.log(this.time);
        },
        axOne(){//用户
           return this.$axios.get(`https://elm.cangdu.org/statis/user/${this.time}/count`)
           
        },
        axTwo(){//订单
            return this.$axios.get(`https://elm.cangdu.org/statis/order/${this.time}/count`)
        },
        axThree(){//管理员
            return this.$axios.get(`https://elm.cangdu.org/statis/admin/${this.time}/count`)
        },
        axFour(){
            return this.$axios.get('https://elm.cangdu.org/v1/users/count')
        },
        axFive(){
            return this.$axios.get('https://elm.cangdu.org/bos/orders/count')
        },
        axSix(){
            return this.$axios.get('https://elm.cangdu.org/admin/count')
        },
        qiX(url,data){//前7天数据新增
            return new Promise(reslove=>{
                this.$axios.get(`https://elm.cangdu.org/statis/${url}/${data}/count`).then(res=>{
                    if(res.data.status==1){
                        reslove(res.data.count);
                    }
                })
            })
        },
    }
}
</script>

<style scoped>
.index_middle{
    width: 100%;
    height: 200px;
    /* border:1px solid #000; */
    text-align: center;
}
.index_middle>ul{
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    margin: 10px 0 10px 10px;
}
.index_middle>ul>li{
    display: flex;
    align-items: center;
    padding:4px 10px;
    background: #E5E9F2;
    margin-right: 20px;
    border-radius: 6px;
    font-size: 14px;
    color:#6666;
}
.index_middle>ul>li:nth-child(1){
    background: orange;
    color: #fff;
    font-size: 22px;
}
.ac{
    background: blue !important;
    /* padding: 4px 12px !important; */
}
h3{
    color: #000;
    margin-right: 10px;
}

.index{
    width: 100%;
    height: 100%;
}
.index_top{
    height: 60px;
    background: #eee;
}
.el-breadcrumb{
 line-height: 60px;
 margin-left: 20px;
}
 

</style>